<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-card style="margin-top: 52px;">
          <el-input
              style="margin-bottom: 10px"
              placeholder="输入关键字进行过滤"
              v-model="filterText">
          </el-input>
          <el-tree
              style="height: 300px; overflow: auto;"
              class="filter-tree"
              :data="ListMunu"
              :highlight-current="true"
              :props="defaultProps"
              default-expand-all
              @node-click="nodeClick	"
              :filter-node-method="filterNode"
              ref="tree">
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="20">
        <vxe-grid
            border
            resizable
            export-config
            import-config
            keep-source
            style="height: calc(100vh - 160px)"
            height="auto"
            tableId="data-table"
            ref="xGrid"
            id="toolbar_demo_1"
            :loading="tableLoading"
            :toolbar="tableToolbar"
            :pager-config="pagerConfig"
            :data="tableData"
            @page-change="pageChangeChange">
          <!-- 工具栏按钮插槽 -->
          <template slot="buttons">
            <div style="float: right;margin-right: 12px;">
              <el-button icon="el-icon-circle-plus" size="medium" circle title="新建用例"
                         @click="create"></el-button>
              <el-button icon="vxe-icon--funnel" size="medium" circle title="查询" style="height: 36px"
                         @click="showSearch = !showSearch"></el-button>
            </div>
          </template>
          <vxe-table-column title="编号" align="center" width="300">
            <template v-slot="{ row }">
              <span>{{row.Id}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="状态" align="center" width="100">
            <template v-slot="{ row }">
              <span>{{row.Status}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="标题" align="center">
            <template v-slot="{ row }">
              <span>{{row.Name}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="版本" align="center" width="100">
            <template v-slot="{ row }">
              <span>{{row.Version}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="维护人" align="center" width="100">
            <template v-slot="{ row }">
              <span>{{row.Acceptname}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="重要程度" align="center" width="100">
            <template v-slot="{ row }">
              <span>{{getCode(row.Degree, 'CASE_ZYCD')}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="用例类型" align="center" width="100">
            <template v-slot="{ row }">
              <span>{{getCode(row.Type, 'CASE_TYPE')}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" align="center" width="160">
            <template v-slot="{ row }">
              <vxe-button v-if="btnPermissionUtil.getBtnbtnPermission('team-delete')" size="mini" @click="edit(row)">编辑</vxe-button>
            </template>
          </vxe-table-column>
        </vxe-grid>
        <el-card v-show="showSearch" style="overflow: auto; position: absolute; width: 300px; height: 400px; top: 52px; right: 0; z-index: 100">
          <el-form>
            <el-form-item v-for="item in colum" :key="item.prop">
              <component :is="item.componentName" v-bind="item" v-model="queryParas[item.prop]"
                         @input="componentNameSu(item.prop).componentNameInput" style="width: 100%"
                         @selectChanged="componentNameSu(item.prop).componentNameSelectChanged"></component>
            </el-form-item>
            <el-form-item style="display: flex; justify-content: center">
              <vxe-button class="search-class" status="primary" size="small" v-throttle="[getDataList, `click`, 300]">查询</vxe-button>
              <vxe-button size="small" @click="reset">重置</vxe-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <div v-if="showSearch" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 99" @click="showSearch = false"></div>
    <test-case-edit :visible.sync="editVisible" :form="caseForm" @getDataList="suClose"></test-case-edit>
  </div>
</template>

<script>
import testCaseApi from "@/api/testCaseApi";
import testCaseEdit from "@/page/ProjectManage/modules/testcase/testCaseEdit";
import projectModuleApi from "@/api/projectModuleApi";
import DictionarySelect from "@/components/element/DictionarySelect";
import SelectProjectTeam from "@/components/element/select/SelectProjectTeam";

export default {
  name: "testcase",
  components: {
    testCaseEdit
  },
  data () {
    return {
      showSearch: false,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      ListMunu: [],
      filterText: '',
      caseForm: {},
      editVisible: false,
      tableData: [],
      HostoryTableData: [],
      tableToolbar: {
        refresh: {query: this.getDataList},
      },
      pagerConfig: {
        currentPage: 1,
        pageSize: 15,
        total: 0,
        pagerCount: 7,
        pageSizes: [10,15,20,50,100]
      },
      tableLoading: false,
      queryParas: {
        p: 1,
        pageoffset: 15,
        id: this.$route.params.id
      },
      colum: [
        {
          placeholder: '请输入标题',
          prop: 'keyword',
          size: 'small',
          componentName: 'vxe-input',
          value: 'keyword',
          clearable: true,
          show: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择状态',
          prop: 'status',
          size: 'small',
          dictTypeCode: 'TASK_STATUS',
          componentName: DictionarySelect,
          value: 'status',
          clearable: true,
          show: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择状态',
          prop: 'degree',
          size: 'small',
          dictTypeCode: 'CASE_ZYCD',
          componentName: DictionarySelect,
          value: 'degree',
          clearable: true,
          show: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择用例类型',
          prop: 'type',
          size: 'small',
          dictTypeCode: 'CASE_TYPE',
          componentName: DictionarySelect,
          value: 'type',
          clearable: true,
          show: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择维护人员',
          prop: 'acceptid',
          size: 'small',
          componentName: SelectProjectTeam,
          value: 'acceptid',
          clearable: true,
          show: true,
          elcolStyle: {
            'width': '200px'
          }
        }
      ]
    }
  },
  mounted() {
    this.getModelData()
    this.getDataList()
  },
  methods: {
    // 重置
    reset () {
      this.queryParas = {
        p: 1,
        pageoffset: 15,
        id: this.$route.params.id
      }
      // this.showSearch = false
      this.getDataList()
    },
    // init初始化
    initProject () {
      let that = this
      setTimeout(function () {
        that.colum.forEach(it => {
          if (it.prop === 'acceptid') {
            that.$set(it, 'queryValue', {
              id: this.queryParas.id
            })
          }
        })
      }, 1000)
    },
    componentNameSu (prop) {
      let componentNameInput = (object) => {
        console.log(object, prop)
        if (!object || object.length === 0) {
          this.$set(this.queryParas, prop, undefined)
        } else {
          this.$set(this.queryParas, prop, this.trimValue(object))
        }
      }
      let componentNameSelectChanged = (object) => {
        this.$set(this.queryParas, prop, object)
      }
      return {
        componentNameInput, componentNameSelectChanged
      }
    },
    // 获取模块
    getModelData () {
      projectModuleApi.getPage({
        id: this.queryParas.id,
        p: 1,
        pageoffset: 10000
      }).then(res => {
        if (res.Modules) {
          this.ListMunu = res.Modules.map(it => {
            return {
              id: it.Id,
              label: it.Name
            }
          })
        }
      })
    },
    nodeClick (obj) {
      this.queryParas.moduleid = obj.id
      this.getDataList()
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    selected (index, indexPath) {
      console.log(index, indexPath)
    },
    getDataList () {
      this.showSearch = false
      this.tableLoading = true
      testCaseApi.getPageCase(this.queryParas).then(res => {
        if (res && res.Modules) {
          const { Modules, Total } = res
          this.tableData = Modules;
          this.HostoryTableData = JSON.parse(JSON.stringify(this.tableData))
          this.pagerConfig.total = Total
        } else {
          this.tableData = []
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    pageChangeChange ({ currentPage, pageSize }) {
      this.queryParas.p = currentPage
      this.queryParas.pageoffset = pageSize
      this.pagerConfig.pageSize = pageSize
      this.pagerConfig.currentPage = currentPage
      this.initData()
    },
    create () {
      this.caseForm = {
        Projectid: this.$route.params.id
      }
      this.editVisible = true
    },
    edit (row) {
      this.caseForm = row
      this.editVisible = true
    },
    suClose () {
      this.getDataList()
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val);
    }
  }
}
</script>

<style scoped lang="scss">
.filter-tree /deep/ .el-tree-node__content {
  height: 40px;
}
</style>